<template>
  <view class="label">
    <!-- 头部 -->
    <view class="top-top">
      <view class=" topbox">
        <view class="top-oneitem"></view>
        <view class="top-twoitem">
          <view class="close" @click="toOffNotice()">
            <image src="../../static/resort/fanhui.png"></image>
          </view>
          <view class="top-tit">聊天信息</view>
          <view class="red-label" @click="labelShow=true">
            <view class=""></view>
            <view class="red-label-tit">
              添加标签
            </view>
          </view>
        </view>
        <!-- 标签弹出框 -->
        <view class="label-popup">
          <u-popup :show="labelShow" @close="labelClose()" @open="labelOpen()" :round="20" mode="bottom">
            <view class="popup-top">
              <view class="popup-close"></view>
              <view class="popup-tit">标签选择</view>
              <view class="popup-close" @click="labelShow = !true">
                <image src="../../static/resort/need/block_close.png" mode=""></image>
              </view>
            </view>
            <view class="label-con">
              <view class="label-search">
                <u-search v-model="labelSearchTit" :show-action="false"></u-search>
              </view>
              <!-- 行业 -->
              <view class="label-con-item">
                <view class="item-top">
                  <view class="label-image">
                    <image src="../../static/resort/need/industry.png" mode=""></image>
                  </view>
                  <view class="label-tit">行业</view>
                </view>
                <view class="item-bottom">
                  <view class="u-page__tag-item" v-for="(item, index) in industryRadios" :key="index">
                    <u-tag :text="item.tit" :plain="!item.checked" type="error" shape="circle" :name="index"
                      @click="industryClick">
                    </u-tag>
                  </view>
                </view>
              </view>
              <!-- 行业 -->
              <!-- 事件 -->
              <view class="label-con-item">
                <view class="item-top">
                  <view class="label-image">
                    <image src="../../static/resort/need/manage.png" mode=""></image>
                  </view>
                  <view class="label-tit">事件</view>
                </view>
                <view class="item-bottom">
                  <view class="u-page__tag-item" v-for="(item, index) in manageRadios" :key="index">
                    <u-tag :text="item.tit" :plain="!item.checked" type="error" shape="circle" :name="index"
                      @click="manageClick">
                    </u-tag>
                  </view>
                </view>
              </view>
              <!-- 事件 -->
              <!-- 物品 -->
              <view class="label-con-item">
                <view class="item-top">
                  <view class="label-image">
                    <image src="../../static/resort/need/article.png" mode=""></image>
                  </view>
                  <view class="label-tit">物品</view>
                </view>
                <view class="item-bottom">
                  <view class="u-page__tag-item" v-for="(item, index) in articleRadios" :key="index">
                    <u-tag :text="item.tit" :plain="!item.checked" type="error" shape="circle" :name="index"
                      @click="articleClick">
                    </u-tag>
                  </view>
                </view>
              </view>
              <!-- 物品 -->
              <!-- 优点 -->
              <view class="label-con-item">
                <view class="item-top">
                  <view class="label-image">
                    <image src="../../static/resort/need/characteristic.png" mode=""></image>
                  </view>
                  <view class="label-tit">优点</view>
                </view>
                <view class="item-bottom">
                  <view class="u-page__tag-item" v-for="(item, index) in meritRadios" :key="index">
                    <u-tag :text="item.tit" :plain="!item.checked" type="error" shape="circle" :name="index"
                      @click="meritClick">
                    </u-tag>
                  </view>
                </view>
              </view>
              <!-- 优点 -->
              <view class="label-txt">
                已选择标签：（3/4）自助餐、餐饮、地方小吃
              </view>
              <view class="label-button">
                <u-button type="error" :plain="true" text="自定义标签" size="small" class="u-button"
                  @click="labelShow = !true;modalShow = true"></u-button>
                <u-button type="error" text="确定" size="small" class="u-button" @click="labelShow = !true"></u-button>
              </view>
            </view>
          </u-popup>
          <!-- 模态框 -->
          <view class="popup-modal">
            <u-modal :show="modalShow" showCancelButton closeOnClickOverlay @confirm="modalConfirm"
              @cancel="modalCancel" @close="modalClose">
              <view class="modal-content">
                <view class="modal-tit">自定义标签</view>
                <view class="txt-content">
                  <textarea class="textarea" placeholder="请输入自定义标签(1个/1行)" placeholder-style="font-size:28rpx"
                    maxlength="100" @input="labelInput" v-model="labelModal" />
                  <view class="need-num">
                    <view class="new-new">{{ labelModal.length }}</view>
                    <view class="all-num">/6</view>
                  </view>
                </view>
                <view class="labels">
                  <u-tag text="数学" bgColor="#F0F0F0" color="#646464" borderColor="#F0F0F0" shape="circle"></u-tag>
                  <u-tag text="英语" bgColor="#F0F0F0" color="#646464" borderColor="#F0F0F0" shape="circle"></u-tag>
                  <u-tag text="外教" bgColor="#FFFFFF" color="#FF2A31" borderColor="#FF2A31" shape="circle"></u-tag>
                  <u-tag text="学前教育" bgColor="#F0F0F0" color="#646464" borderColor="#F0F0F0" shape="circle"></u-tag>
                </view>
              </view>
            </u-modal>
          </view>
          <!-- 模态框 -->
        </view>
        <!-- 标签弹出框 -->
      </view>
    </view>
    <!-- 头部 -->
    <view style="height: 150rpx;"></view>
    <!-- 标签列表 -->
    <view class="all-label">
      <view class="tabel-one">
        <view class="label-tit">
          好老师<text>(8.8万)</text>
        </view>
        <view class="label-tit2">
          可爱<text>(6万)</text>
        </view>
        <view class="label-tit2">
          真心待人<text>(9598)</text>
        </view>
      </view>
      <view class="tabel-one">
        <view class="label-tit2" v-for="(item,i) in oneList" :key="i">
          {{item.name}}<text>{{item.num}}</text>
        </view>
      </view>
      <view class="tabel-one">
        <view class="label-tit2" v-for="(item,i) in twoList" :key="i">
          {{item.name}}<text>{{item.num}}</text>
        </view>
      </view>
    </view>
    <!-- 标签列表 -->
    <!-- 列表信息 -->
    <view class="chat-list">
      <view class="list-item" v-for="item in 6">
        <view class="item-left">
          <image src="../../static/message/user_three.png" class="user-left"></image>
          <view class="ab-image">
            <image src="../../static/message/sex_woman.png" mode=""></image>
          </view>
        </view>
        <view class="item-right">
          <view class="list-name">隔壁美女小美</view>
          <view class="list-con">好老师！尽心尽责！对人耐心！</view>
          <view class="list-time">16：13广西</view>
        </view>
      </view>
      <!-- 展开更多 -->
      <view class="more">
        <view class="more-tit">展开更多</view>
        <view class="more-image">
          <image src="../../static/message/blue_bottom.png" mode=""></image>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        oneList: [{
          name: '憨厚',
          num: '(734)'
        }, {
          name: '重情义',
          num: '(65)'
        }, {
          name: '靠谱',
          num: '(98)'
        }, {
          name: '有情有义',
          num: '(73)'
        }],
        twoList: [{
          name: '实心眼',
          num: '(15)'
        }, {
          name: '骗子',
          num: '(6)'
        }, {
          name: '美女',
          num: '(2)'
        }],
        labelShow: false,
        labelSearchTit: '教育',
        industryRadios: [{
          tit: '建筑',
          checked: false
        }, {
          tit: '医疗',
          checked: false
        }, {
          tit: '餐饮',
          checked: true
        }, {
          tit: '生活用品',
          checked: false
        }, {
          tit: '医疗',
          checked: false
        }],
        manageRadios: [{
          tit: '直播',
          checked: false
        }, {
          tit: '运动',
          checked: false
        }, {
          tit: '露营',
          checked: true
        }, {
          tit: '体育健身',
          checked: false
        }, {
          tit: '冲浪',
          checked: false
        }],
        articleRadios: [{
          tit: '烧烤',
          checked: false
        }, {
          tit: '西餐',
          checked: false
        }, {
          tit: '餐饮',
          checked: false
        }, {
          tit: '自助餐',
          checked: true
        }, {
          tit: '火锅',
          checked: false
        }],
        meritRadios: [{
          tit: '服务',
          checked: false
        }, {
          tit: '特色',
          checked: false
        }, {
          tit: '环境',
          checked: false
        }, {
          tit: '性价比高',
          checked: true
        }, {
          tit: '轻奢',
          checked: false
        }],
        labelShow: false,
        labelSearchTit: '教育',
        modalShow: false,
        labelModal: '',
      };
    },
    methods: {
      industryClick(name) {
        this.industryRadios.map((item, index) => {
          item.checked = index === name ? true : false
        })
      },
      manageClick(name) {
        this.manageRadios.map((item, index) => {
          item.checked = index === name ? true : false
        })
      },
      articleClick(name) {
        this.articleRadios.map((item, index) => {
          item.checked = index === name ? true : false
        })
      },
      meritClick(name) {
        this.meritRadios.map((item, index) => {
          item.checked = index === name ? true : false
        })
      },
      labelOpen() {
        console.log('labelOpen');
      },
      labelClose() {
        this.labelShow = false
        console.log('labelClose');
      },
      modalConfirm() {
        this.modalShow = false
        console.log('modalConfirm');
      },
      modalCancel() {
        this.modalShow = false
        console.log('modalCancel');
      },
      modalClose() {
        this.modalShow = false
        console.log('modalClose');
      },
      labelInput(e) {
        console.log(e.detail.value.length, '输入的字数')
      },
      toOffNotice() {
        uni.navigateBack({
          delta: 1
        })
      }
    }
  }
</script>

<style lang="scss">
  .label {

    // 头部
    .top-top {
      width: 100vw;
      z-index: 99;
      position: fixed;
      top: 0;
      background-color: #fff;

      .topbox {
        width: 90vw;
        margin: auto;
        justify-content: space-between;

        .top-oneitem {
          width: 100%;
          height: var(--status-bar-height);
        }

        .top-twoitem {
          height: 100rpx;
          display: flex;
          align-items: center;
          justify-content: space-between;

          .close {
            width: 30vw;

            image {
              width: 16rpx;
              height: 32rpx;
              vertical-align: middle;
            }
          }

          .top-tit {
            width: 30vw;
            font-size: 36rpx;
          }

          .red-label {
            width: 30vw;
            text-align: center;
            display: flex;
            justify-content: space-between;

            .red-label-tit {
              width: 20vw;
              background-color: #F5282F;
              color: #fff;
              border-radius: 10rpx;
            }
          }
        }

        // 标签弹出框
        .label-popup {
          .popup-top {
            width: 100vw;
            display: flex;
            justify-content: space-between;
            padding: 20rpx 5vw;
            box-sizing: border-box;
            box-shadow: 0rpx 0rpx 10rpx #ccc;


            .popup-tit {
              font-size: 36rpx;
              margin-left: 10rpx;
            }

            .popup-close {
              image {
                width: 30rpx;
                height: 30rpx;
                vertical-align: middle;
              }
            }
          }

          .label-con {
            padding: 20rpx 0;

            .label-search {
              width: 90vw;
              margin: 0 auto;
            }

            .label-con-item {
              margin: 30rpx 0;

              .item-top {
                width: 90vw;
                margin: 20rpx auto;
                display: flex;

                .label-image {
                  image {
                    width: 40rpx;
                    height: 40rpx;
                    vertical-align: middle;
                    margin-right: 20rpx;
                  }
                }

                .label-tit {
                  font-size: 34rpx;
                }
              }

              .item-bottom {
                display: flex;
                justify-content: space-between;
                width: 85vw;
                margin: 0 auto;
              }
            }

            .label-txt {
              width: 90vw;
              margin: 0 auto;
              color: #B7B7B7;
            }

            .label-button {
              width: 85vw;
              margin: 0 auto;
              display: flex;
              justify-content: space-between;

              .u-button {
                width: 304rpx;
                margin: 20rpx 0;
              }
            }
          }

          // 模态框
          .popup-modal {
            .modal-content {
              .modal-tit {
                font-size: 32rpx;
                text-align: center;
                margin-bottom: 20rpx;
              }

              .txt-content {
                width: 75vw;
                margin: 0 auto;
                height: 164rpx;
                background-color: #F5F5F5;
                padding: 10rpx;
                box-sizing: border-box;

                .textarea {
                  height: 90rpx;
                }

                .need-num {
                  display: flex;
                  justify-content: flex-end;

                  .new-new {
                    color: #72DBA4;
                  }

                  .all-num {
                    color: #DCDCDC;
                  }
                }
              }

              .labels {
                display: flex;
                justify-content: space-between;
                margin: 20rpx 0;
              }
            }
          }
        }
      }
    }

    // 标签列表
    .all-label {
      width: 90vw;
      margin: 0 auto;

      .tabel-one {
        display: flex;
        margin: 30rpx 0;

        .label-tit {
          font-size: 28rpx;
          padding: 0 10rpx;
          border-radius: 30rpx;
          background-color: #FFEAE8;
          color: #474544;
          margin-right: 10rpx;

          text {
            color: #A19F9F;
          }
        }

        .label-tit2 {
          font-size: 28rpx;
          padding: 0 10rpx;
          border-radius: 30rpx;
          background-color: #fff;
          color: #474544;
          margin-right: 10rpx;

          text {
            color: #A19F9F;
          }
        }
      }
    }

    // 列表信息
    .chat-list {
      margin-top: 40rpx;

      .list-item {
        display: flex;
        padding: 20rpx 5vw;
        align-items: flex-start;
        border-bottom: 1px solid #ECECEC;

        .item-left {
          position: relative;
          margin-right: 30rpx;

          .user-left {
            width: 96rpx;
            height: 96rpx;
          }

          .ab-image {
            position: absolute;
            top: 75rpx;
            left: -5rpx;

            image {
              width: 28rpx;
              height: 28rpx;
            }
          }
        }

        .item-right {
          .list-name {
            font-size: 30rpx;
            color: #A19F9F;
          }

          .list-con {
            font-size: 36rpx;
            margin: 10rpx 0;
          }

          .list-time {
            color: #A19F9F;
            font-size: 24rpx;
          }
        }
      }

      .more {
        display: flex;
        align-items: center;
        justify-content: center;
        margin-top: 100rpx;
        padding-bottom: 60rpx;

        .more-tit {
          color: #2B95E3;
          font-size: 32rpx;
        }

        .more-image {
          image {
            width: 32rpx;
            height: 32rpx;
            vertical-align: middle;
          }
        }
      }
    }
  }
</style>